<template>
  <div class="chat-box">
    <el-container style="height: 100%;">
      <el-header style="height: 56px;">
        <span>{{ chatsList.chatSessionName }}</span>
        <span title="群聊信息" v-show="chatsList.chatSessionId.startsWith('GRP')" class="el-icon-more btn-side"
          style="cursor: pointer;" @click="showSide = !showSide"></span>
      </el-header>
      <el-main style="padding: 0;">
        <el-container style="height: 100%;">
          <el-container class="content-box">
            <!-- 聊天信息展示 -->
            <el-main class="im-chat-main" id="chatScrollBox">
              <div class="im-chat-box">
                <ul>
                  <li v-for="(msgInfo, idx) in activeChatList" :key="idx">
                    <chat-message-item :msgInfo="msgInfo"></chat-message-item>
                  </li>
                </ul>
              </div>
            </el-main>
            <el-footer style="height: 240px; background: #f5f5f5;" class="im-chat-footer">
              <!-- 工具栏 -->
              <div class="chat-tool-bar">
                <div title="发送图片" @click="handlebo(1)"> <i class="el-icon-picture-outline"></i> </div>
                <div title="发送文件" @click="handlebo(2)"> <i class="el-icon-wallet"></i> </div>
                <div title="聊天记录" class="el-icon-chat-dot-round" style="cursor: pointer;"></div>
              </div>
              <!-- 输入框和发送按钮 -->
              <div class="send-content-area">
                <ChatInput ref="chatInput" :ownerId="group.ownerId" :groupMembers="groupMembers"
                  @send-message="sendMessage" />
                <div class="send-btn-area">
                  <button type="button" class="el-button el-button--primary"
                    style="font-size: 14px; padding: 10px 20px;" @click="sendMessage">发送</button>
                </div>
              </div>
            </el-footer>
          </el-container>
          <!-- 侧边栏 -->
          <el-aside class="chat-group-side-box" v-if="showSide">
            <chat-group-side :memberList="memberList" :chatsList="chatsList"></chat-group-side>
          </el-aside>
          <!-- 发送图片对话框 -->
          <chat-group-dialog :visible.sync="dialogVisible" :chatSessionId="chatsList.chatSessionId" :title="title"
            :fileType="fileType"> </chat-group-dialog>

        </el-container>

      </el-main>
    </el-container>
  </div>
</template>

<script>
import ChatMessageItem from "./ChatMessageItem.vue";
import ChatInput from "./ChatInput.vue";
import ChatGroupDialog from "./ChatGroupDialog.vue";
import ChatGroupSide from "./ChatGroupSide.vue";

export default {
  name: 'StaticChatPage',
  components: {
    ChatMessageItem,
    ChatInput,
    ChatGroupDialog, ChatGroupSide
  },
  props: {
    activeChatList: {
      type: Array
    }, chatsList: {
      type: Object
    }
  },
  data () {
    return {
      fileType: '',
      title: "",
      dialogVisible: false,
      showSide: false, // 是否显示群聊信息栏
      // 这里保留静态数据（例如群成员信息、聊天记录等）
      group: {
        ownerId: 1
      },
      // 群组成员数据
      groupMembers: [],
      // 控制显示最小的消息索引
      showMinIdx: 0
    };
  },
  created () {
    this.scrollToBottom()
    this.member()
  },
  watch: {
    activeChatList (newVal, oldVal) {
      if (newVal !== oldVal) {
        // 当 activeChatList 变化时，关闭侧边栏
        this.showSide = false;
      }
    }
  },
  computed: {
    memberList () {
      return this.$store.getters['memberList'];
    },
  },
  methods: {
    // 查询会话成员
    async member () {
      const token = sessionStorage.getItem('token')
      console.log(this.chatsList.chatSessionId, this.chatsList, "response");
      this.$store.dispatch('memberMessage', { token, chatSessionId: this.chatsList.chatSessionId });

    },
    handlebo (e) {
      if (e === 1) {
        this.dialogVisible = true
        this.title = '发送图片'
        this.fileType = 'image'
      } else {
        this.dialogVisible = true
        this.title = '发送文件'
        this.fileType = 'pdf'
      }
    },
    // 自动滚动到聊天框底部
    scrollToBottom () {
      this.$nextTick(() => {
        const chatScrollBox = document.getElementById('chatScrollBox');
        if (chatScrollBox) {
          chatScrollBox.scrollTop = chatScrollBox.scrollHeight;
        }
      });
    },
    // 发送+输入框
    async sendMessage () {
      console.log(this.$refs.chatInput, "ref");

      const inputContent = this.$refs.chatInput.getContent();
      const token = sessionStorage.getItem('token')
      console.log(this.chatsList.chatSessionId, "chatSessionId");

      const data = await this.$http.post('/chat/msg/send',
        {
          token,
          chatSessionId: this.chatsList.chatSessionId,
          mediaType: 'TEXT',
          content: inputContent
        })
      console.log("发送文本", data);
      if (data.code === 0) {
        this.$refs.chatInput.clearContent();
      }
      this.scrollToBottom(); // 发送消息后滚动到底部
    },
    // 模拟用户头像
    headImage (msgInfo) {
      const user = this.groupMembers.find(member => member.id === msgInfo.sendId);
      return user ? user.avatar : '';
    },
    // 显示用户名称
    showName (msgInfo) {
      const user = this.groupMembers.find(member => member.id === msgInfo.sendId);
      return user ? user.name : '';
    },
    // 模拟消息撤回
    recallMessage (msgInfo) {
      console.log('撤回消息:', msgInfo);
      // 在此处可以添加撤回逻辑，例如从消息列表中删除该消息
    },
    // 模拟删除消息
    deleteMessage (msgInfo) {
      console.log('删除消息:', msgInfo);
    },
  },
  updated () {
    this.scrollToBottom(); // 每次更新数据时滚动到底部
  },
};
</script>

<style scoped lang="scss">
.upload-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.upload-label {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 15px;
}

.upload-input {
  display: none;
  /* 隐藏原始文件输入框 */
}

.preview-container {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.preview-item {
  margin: 10px;
  max-width: 200px;
}

.preview-item img,
.preview-item video {
  max-width: 100%;
  max-height: 150px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chat-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  border: #dddddd solid 1px;

  .el-header {
    background-color: white;
    line-height: 50px;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px #ddd solid;

    .btn-side {
      position: absolute;
      right: 20px;
      line-height: 50px;
      font-size: 25px;
      cursor: pointer;
    }
  }

  .im-chat-main {
    padding: 0;
    background-color: #f8f8f8;
    width: 100%;

    .im-chat-box {
      >ul {
        padding: 0 20px;

        li {
          list-style-type: none;
        }
      }
    }
  }

  .im-chat-footer {
    display: flex;
    flex-direction: column;
    padding: 0;

    .chat-tool-bar {
      display: flex;
      position: relative;
      width: 100%;
      height: 40px;
      text-align: left;
      box-sizing: border-box;
      border-top: #ccc solid 1px;
      padding: 2px;
      background-color: #e8f2ff;

      >div {
        font-size: 22px;
        cursor: pointer;
        color: black;
        line-height: 30px;
        width: 30px;
        height: 30px;
        text-align: center;
        border-radius: 3px;
        margin: 3px;

        &:hover {
          color: black;
        }

        &.chat-tool-active {
          font-weight: 600;
          color: #195ee2;
          background-color: #ddd;
        }
      }

      >div:hover {
        color: #949494;
      }
    }

    .send-content-area {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: white !important;

      .send-text-area {
        box-sizing: border-box;
        padding: 5px;
        width: 100%;
        flex: 1;
        resize: none;
        font-size: 16px;
        color: black;
        outline: none;

        text-align: left;
        line-height: 30px;

        &:before {
          content: attr(placeholder);
          color: gray;
        }

        .at {
          color: blue;
          font-weight: 600;
        }

        .receipt {
          color: darkblue;
          font-size: 15px;
          font-weight: 600;
        }

        .emo {
          width: 30px;
          height: 30px;
          vertical-align: bottom;
        }
      }

      .send-image-area {
        text-align: left;
        border: #53a0e7 solid 1px;

        .send-image-box {
          position: relative;
          display: inline-block;

          .send-image {
            max-height: 180px;
            border: 1px solid #ccc;
            border-radius: 2%;
            margin: 2px;
          }

          .send-image-close {
            position: absolute;
            padding: 3px;
            right: 7px;
            top: 7px;
            color: white;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            background-color: #aaa;
            border-radius: 50%;
            border: 1px solid #ccc;
          }
        }
      }

      .send-btn-area {
        padding: 10px;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
  }

  .chat-group-side-box {
    border: #dddddd solid 1px;
    animation: rtl-drawer-in .3s 1ms;
    padding: 20px;
  }
}
</style>
